<template>
  <div class="index-container">
    <!-- <a-back-top :visibilityHeight="1" /> -->
    <ul class="flag-right">
      <li v-popover:popoverfeedback class="flag-item">
        <div class="flag-item-box go-feedback" @click="goFeedbackFun"></div>
      </li>
      <el-popover
        ref="popoverfeedback"
        popper-class="feedback-con-box"
        placement="left"
        width="105"
        trigger="hover">
        <div class="feedback-con">
          意见反馈
        </div>
      </el-popover>
      <li v-popover:popover class="flag-item">
        <div class="flag-item-box go-consulting"></div>
        <!-- <div class="consulting-con">
          <h4 class="titletext">问题咨询</h4>
          <p class="subtitle">扫码添加管理员微信号</p>
          <div class="consult-img">
            <img src="@/common/image/new-mirror-ico.png" alt="">
          </div>
        </div> -->
      </li>
      <el-popover
        ref="popover"
        popper-class="consulting-con-box"
        placement="left"
        width="167"
        trigger="hover">
        <div class="consulting-con">
          <h4 class="titletext">问题咨询</h4>
          <p class="subtitle">扫码添加管理员微信号</p>
          <div class="consult-img">
            <img src="@/common/image/contact-administrator-ico.png" alt="">
          </div>
        </div>
      </el-popover>
      <li v-show="btnFlag" class="flag-item">
        <div class="flag-item-box go-top" @click="backTop"></div>
      </li>
    </ul>
    <m-header></m-header>
    <router-view class="componet"></router-view>
    <m-footer></m-footer>
    <div class="data-migration" @click="linkTo" v-if="false">
      <i class="icon-migration"></i>
      <span class="txt">数据<br />迁移</span>
    </div>
  </div>
</template>

<script>
import Header from '@/components/header/header'
import Footer from '@/components/footer/footer'
export default {
  data () {
    return {
      btnFlag: false
    }
  },
  created: function () {
  },
  computed: {
    path: function () {
      let path = this.$route.path.split('/')
      return `/${path[1]}`
    }
  },
  mounted () {
    window.addEventListener('scroll', this.scrollToTop)
  },
  destroyed () {
    window.removeEventListener('scroll', this.scrollToTop)
  },
  methods: {
    // 点击图片回到顶部方法，加计时器是为了过渡顺滑
    backTop () {
      let that = this
      let timer = setInterval(() => {
        let ispeed = Math.floor(-that.scrollTop / 5)
        document.documentElement.scrollTop = document.body.scrollTop = that.scrollTop + ispeed
        if (that.scrollTop === 0) {
          clearInterval(timer)
        }
      }, 16)
    },
    goFeedbackFun () {
      this.$router.push({ path: '/feedback' })
    },
    linkTo () {
      this.$router.push('/filemigration')
    },
    scrollToTop () {
      let that = this
      let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      that.scrollTop = scrollTop
      if (that.scrollTop > 60) {
        that.btnFlag = true
      } else {
        that.btnFlag = false
      }
    }
  },
  components: {
    MHeader: Header,
    MFooter: Footer
  }
}
</script>

<style lang="stylus" rel="stylus">
.headermovepopper
  padding 0
  border-radius 0
.index-container
  display flex
  flex-direction column
  height 100%
  .componet
    flex 1 0 auto
    background #ffffff
.flag-right
  position fixed
  bottom 50px
  right 50px
  z-index 999
  background #ffffff
  border 1px solid #E8E8E8
  .flag-item
    padding 13px
    position relative
    top 0
    left 0
    cursor pointer
    .flag-item-box
      width 24px
      height 24px
      transition-duration 1s
      &.go-feedback
        background url(../../common/image/feedback-ico-gray.png) no-repeat center
        background-size 24px 24px
      &.go-consulting
        background url(../../common/image/problem-consulting-ico-gray.png) no-repeat center
        background-size 24px 24px
      &.go-top
        background url(../../common/image/back-top-ico-gray.png) no-repeat center
        background-size 24px 24px
    &:hover .go-feedback
      background url(../../common/image/feedback-ico.png) no-repeat center
      background-size 24px 24px
    &:hover .go-consulting
      background url(../../common/image/problem-consulting-ico.png) no-repeat center
      background-size 24px 24px
    &:hover .go-top
      background url(../../common/image/back-top-ico.png) no-repeat center
      background-size 24px 24px
.consulting-con-box
  .consulting-con
    .titletext
      font-size 14px
      line-height 14px
      color #2D323B
      font-weight 600
      text-align center
      margin-bottom 8px
    .subtitle
      font-size 12px
      line-height 14px
      color #63666C
      text-align center
      margin-bottom 8px
    .consult-img
      width 138px
      height 138px
      margin 0 auto 0
      img
        width 100%
        height 100%
.feedback-con-box
  &.el-popover
    min-width 100px
    text-align center
  .feedback-con
    font-size 14px
    line-height 14px
    color #2D323B
.data-migration
  position fixed
  top 50%
  right 50px
  z-index 111
  width 50px
  height 100px
  background #ffffff
  padding 14px 0
  border 1px solid #E8E8E8
  cursor pointer
  user-select none
  &:hover
    .txt
      color #2196F3
  .icon-migration
    display block
    width 100%
    height 24px
    background url(../../common/image/icon/icon-migration.png) no-repeat center
    background-size 22px 24px
  .txt
    display block
    width 100%
    padding-top 14px
    text-align center
    line-height 14px
    font-size 12px
    color #63666C
</style>
